{% extends "admin/change_list.html" %}  
{% load i18n admin_urls static admin_list %}  
  
{% block content_title %}  
    {% if cart_count %}  
        <div class="cart-info" style="margin: 10px 0; padding: 10px; background: #e8f4fd; border-radius: 4px;">  
            <i class="el-icon-shopping-cart-2"></i>  
            购物车中有 <strong>{{ cart_count }}</strong> 项  
        </div>  
    {% endif %}  
{% endblock %}  
  
{% block search %}  
    {{ block.super }}  
      
    <!-- 产品类型筛选下拉框 -->  
    <div class="product-filter" style="margin: 10px 0;">  
        <label for="product_type">产品类型：</label>  
        <select id="product_type" onchange="filterByProductType(this.value)" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px;">  
            <option value="">全部</option>  
            <option value="material">物料信息</option>  
            <option value="product">产品信息</option>  
        </select>  
    </div>  
      
    <!-- 多料号搜索弹窗 -->  
    <div id="multi-search-dialog" style="display: none;">  
        <div class="dialog-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;" onclick="closeMultiSearchDialog()"></div>  
        <div class="dialog-content" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; min-width: 500px; z-index: 10000; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">  
            <h3 style="margin-top: 0; margin-bottom: 20px; color: #333;">多料号精准搜索</h3>  
            <form id="multi-search-form">  
                {% csrf_token %}  
                <div style="margin-bottom: 15px;">  
                    <label for="part_numbers_input" style="display: block; margin-bottom: 5px; font-weight: bold;">原厂料号（每行一个）：</label>  
                    <textarea   
                        id="part_numbers_input"  
                        name="part_numbers"   
                        rows="8"   
                        cols="60"  
                        style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; resize: vertical; outline: none; box-sizing: border-box;"  
                        placeholder="请输入料号，每行一个&#10;例如：&#10;PN001&#10;PN002&#10;PN003"  
                        autofocus></textarea>  
                </div>  
                <div style="text-align: right; margin-top: 20px;">  
                    <button type="button" onclick="closeMultiSearchDialog()" style="margin-right: 10px; padding: 8px 16px; border: 1px solid #ddd; background: #f5f5f5; border-radius: 4px; cursor: pointer;">取消</button>  
                    <button type="submit" style="padding: 8px 16px; background: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer;">搜索</button>  
                </div>  
            </form>  
        </div>  
    </div>  
      
    <script>  
    function filterByProductType(type) {  
        if (type === 'material') {  
            // 根据你的 URL 配置 path('', admin.site.urls)，需要替换为实际的应用名称  
            window.location.href = '/materials/materialinfo/';  
        } else if (type === 'product') {  
            window.location.href = '/materials/productinfo/';  
        }  
    }  
      
    function openMultiSearchDialog() {  
        document.getElementById('multi-search-dialog').style.display = 'block';  
        // 确保 textarea 获得焦点  
        setTimeout(function() {  
            document.getElementById('part_numbers_input').focus();  
        }, 100);  
    }  
      
    function closeMultiSearchDialog() {  
        document.getElementById('multi-search-dialog').style.display = 'none';  
        // 清空输入内容  
        document.getElementById('part_numbers_input').value = '';  
    }  
      
    document.getElementById('multi-search-form').addEventListener('submit', function(e) {  
        e.preventDefault();  
        const partNumbers = document.getElementById('part_numbers_input').value.trim();  
          
        if (partNumbers) {  
            // 直接使用当前页面的URL进行搜索  
            const pnList = partNumbers.split('\n').filter(pn => pn.trim());  
            const searchQuery = pnList.join('|');  // 使用 | 分隔符，与 admin 类中的逻辑一致  
            const currentUrl = new URL(window.location);  
            currentUrl.searchParams.set('q', searchQuery);  
            window.location.href = currentUrl.toString();  
        } else {  
            alert('请输入至少一个料号');  
        }  
          
        closeMultiSearchDialog();  
    });  
      
    // 阻止点击对话框内容区域时关闭弹窗  
    document.querySelector('.dialog-content').addEventListener('click', function(e) {  
        e.stopPropagation();  
    });  
      
    // ESC 键关闭弹窗  
    document.addEventListener('keydown', function(e) {  
        if (e.key === 'Escape' && document.getElementById('multi-search-dialog').style.display === 'block') {  
            closeMultiSearchDialog();  
        }  
    });  
      
    // 添加多料号搜索按钮到工具栏  
    $(document).ready(function() {  
        // 在搜索区域添加多料号搜索按钮  
        if ($('.multi-search-controls').length === 0) {  
            var searchButton = '<div class="multi-search-controls" style="margin: 10px 0;">' +  
                '<button type="button" onclick="openMultiSearchDialog()" class="el-button el-button--primary el-button--small">' +  
                '多料号精准搜索' +  
                '</button>' +  
                '</div>';  
            $('#toolbar').after(searchButton);  
        }  
          
        // 只是添加调试信息，不阻止 SimpleUI 的内置逻辑  
        $('.actions button').on('click', function() {  
            var checkbox_checked = $(".action-checkbox input:checked").length;  
            console.log('选中的项目数量:', checkbox_checked);  
        });  
    });  
    </script>  
{% endblock %}